<style lang="scss">
#canvas {
  width: 80% !important;
  height: auto !important;
}

// .time_box {
//   width: 100%;

//   .time_oi {
//     height: 7vh;
//     width: 85vw;
//     overflow: auto;
//   }
// }

// .time_box_list {
//   width: 145%;
//   display: flex;

//   p {
//     width: 10%;
//     color: #fff;
//     background: #000;
//     border-radius: 5px;
//     text-align: center;
//     background: red;
//     border-radius: 5px;
//     text-align: center;
//   }


// }
</style>

<template>
  <div class="time_box">
    <div class="time_oi">
      <div class="time_box_list">
        <!-- <p @click="time_btn($event)"  v-for="item in 10" style="margin: 5px;">{{ weekday(item - 1) }} <span>{{
          getDay(item - 1) }}</span></p> -->
        <p @click="time_btn(i)" v-for="(item, i) in 10" style="margin: 5px;" ref="test">{{ weekday(item - 1) }} <span>{{
          getDay(item - 1) }}</span></p>
      </div>
    </div>

    <div>
      <img :src="qrcode" width="192">

    </div>


  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import QRCode from 'qrcode'
Vue.use(Tab);
Vue.use(Tabs);
// let year = now.getFullYear();
// let month = now.getMonth() + 1;
// let day = now.getDate();
// let time_data = year + '-' + month + '-' + day


// //时间
let now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes()
let myDate = hours + ':' + minutes

//月份
export default {
  name: '',
  data() {
    return {
      qrcode: '',
      test: null,
      myDate,
      time_list: [],
      index: 0,
      oi: 'u156451515'
    }
  },
  mounted() {
    console.log('mounted');
    console.log(this.oi, '666');
    this.setQRCode(this.oi)
  },
  computed: {
    getWeekday() {

      let date = new Date();
      let weekday = date.getDay();
      let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      return '周' + weekdays[weekday];
    }
  },

  methods: {
    setQRCode(str) {
      QRCode.toDataURL(str, { width: 192, margin: 1 }).then(res => {
        // toDataURL方法返回一个promise
        this.qrcode = res;
      })
    },
    // item变化的是1-7，写一个函数，返回值是周几。在{{}}里调用这个函数，里面的参数写item
    weekday(item) {

      let date = new Date();
      let weekday = date.getDay();
      let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      return '周' + weekdays[(weekday + item) % 7];
    },
    getDay(item) {
      let now = new Date();
      now.setDate(now.getDate() + item)
      console.log(now.getDate());
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      return month + '/' + day
    },
    time_btn(i) {
      this.index = i
      this.time_list = this.$refs.test[i].innerText
      console.log((this.time_list.split(' ').reverse().join('/')))
      console.log('====================================');
      console.log(this.index);
      console.log('====================================');
    }
  },
  components: {

  },

}

</script>


